<template>
  <div class="center-container">
    <div class="game-grid">
      <div v-for="(layer, layerIndex) in computedImageGrid" :key="layerIndex" class="layer">
        <div v-for="(item, index) in layer" :key="index" class="cell" :style="item.computedStyle">
        </div>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      n: 3, // Number of layers
      images: [
        {
          url: "https://pic.imgdb.cn/item/64994b531ddac507cc039bfb.jpg",
          sort: "鸡腿",
        },
        {
          url: "https://pic.imgdb.cn/item/64994b4e1ddac507cc03959c.jpg",
          sort: "爆破果果",
        },
      ],
      imageGrid: [],
    };
  },
  computed: {
    computedStyle() {
      return {
        base: (item) =>
               `background-image: url(${item.image}); width: 60px; height: 60px; position: absolute; top: ${item.top}; left: ${item.left}; z-index: ${item.zIndex}`,
             pressed: 'opacity: 0.5;',
      };
    },
   computedImageGrid() {
     const reversedImageGrid = [...this.imageGrid].reverse();
     return reversedImageGrid.map((layer, layerIndex) =>
       layer.map((item, rowIndex, layer) => {
         const isPressed = this.isPressed(item, rowIndex, layer);
         const computedStyle = item.visible
           ? `${this.computedStyle.base(item)}; ${
               isPressed ? this.computedStyle.pressed : ''
             }`
           : 'visibility: hidden;';
   
         return {
           ...item,
           computedStyle,
           isPressed,
         };
       })
     );
   },

  },
  mounted() {
    this.generateImageGrid();
  },
  methods: {
    isPressed(item, rowIndex, layer) {
  const currentZIndex = item.zIndex;

  // Check if there is a block above
  if (rowIndex > 0) {
    const aboveItem = layer[rowIndex - 1];
    if (aboveItem.zIndex >= currentZIndex) {
      return true;
    }
  }

  // Check if there is a block on the left
  if (rowIndex % layer.length !== 0) {
    const leftItem = layer[rowIndex - 1];
    if (leftItem.zIndex >= currentZIndex) {
      return true;
    }
  }

  return false;
},


   generateImageGrid() {
     const numRowsList = [4, 6, 9]; // Number of rows in each layer
     const numColsList = [4, 6, 9]; // Number of columns in each layer
   
     this.imageGrid = numRowsList.map((numRows, layerIndex) => {
       const numCols = numColsList[layerIndex];
       const count = numRows * numCols;
       const shuffledImages = Array.from(this.images); // Copy the images array
       shuffledImages.sort(() => 0.5 - Math.random());
       const selectedImages = shuffledImages.slice(0, count);
   
       return Array.from({ length: count }, (_, index) => {
         const image = selectedImages[index % selectedImages.length]; // Select images cyclically
         return {
           image: image.url,
           sort: image.sort,
           visible: true,
           computedStyle: {},
         };
       }).map((item, index) => {
         const row = Math.floor(index / numCols);
         const col = index % numCols;
         const zIndex = this.n - layerIndex;
         const top = `${row * 60 + layerIndex * 30}px`;
         const left = `${col * 60 + layerIndex * 30}px`;
         return {
           ...item,
           zIndex,
           top,
           left,
         };
       });
     });
   },

  },
};
</script>

<style>
.center-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  position: relative;
}

.game-grid {
  position: relative;
}

.layer {
  position: absolute;
  top: 0;
  left: 0;
}

.cell {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  border: 1px solid #ccc;
}




</style>
